<template>
  <div>
    <el-row>
      <el-col :span="24">
        <!-- 放搜索条件 -->

        <el-form :inline="true" :model="checkProjectParm" class="demo-form-inline">

          <el-form-item label="项目名">
            <el-input v-model="checkProjectParm.pjName" placeholder="请输入" style="width: 100px;"></el-input>
          </el-form-item>
          
          <el-form-item label="状态">
            <el-select v-model="checkProjectParm.pjStatus" placeholder="请选择">
              <el-option value="y" label="正在服务"></el-option>
              <el-option value="n" label="暂停服务"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryCondition">查询</el-button>
            <el-button type="primary" @click="remove">清空</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-circle-plus-outline" @click="add">添加设备</el-button>

          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <!-- 放数据部分 -->
        <el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%; ">
          <el-table-column prop="pjName" label="项目名" width="180">
          </el-table-column>
          <el-table-column prop="pjPrice" label="项目价格" width="150" align="center">
          </el-table-column>
          


          
          <el-table-column prop="pjStatus" label="设备状态" align="center">
            <template slot-scope="scope">
              <span>
                {{ scope.row.pjStatus == "y" ? '正在服务' : '暂停服务' }}
              </span>
            </template>
          </el-table-column>
          

          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="warning" icon="el-icon-edit" @click="upadtePage(scope.row.id)">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" style="margin-left: 0;"
                @click="deleteCheckProject(scope.row.id)">删除</el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <!-- 放分页 -->

        <el-pagination background :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
          @size-change="changeSize" @current-change="changeCurrent" :total="total">
        </el-pagination>
      </el-col>
    </el-row>



    <!-- 放新增界面 -->

    <el-dialog title="" :visible.sync="checkProjectAddVisible">
      <el-form :model="checkProject">
        <el-form-item label="检查项目名">
          <el-input v-model="checkProject.pjName" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="检查价格" >
          <el-input v-model="checkProject.pjPrice" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        

        <el-form-item label="所属科室" >
          <el-select v-model="checkProject.pjDepartmentId" placeholder="请选择所属科室">
            <el-option v-for="tde in tdeList" :key="tde.id" :value="tde.id" :label="tde.deName"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="checkProjectAddVisible = false, checkProject = {}">取 消</el-button>
        <el-button type="primary" @click="addTokenCheckProject">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 放修改界面 -->

    <el-dialog title="检查项目修改" :visible.sync="checkProjectUpdateVisible">
      <el-form :model="checkProject">
        <el-form-item label="检查项目名">
          <el-input v-model="checkProject.pjName" style="width: 270px;"></el-input>
        </el-form-item>
        <el-form-item label="检查价格" >
          <el-input v-model="checkProject.pjPrice" autocomplete="off" style="width: 270px;"></el-input>
        </el-form-item>
        

        <el-form-item label="所属科室" >
          <el-select v-model="checkProject.pjDepartmentId" placeholder="请选择所属科室">
            <el-option v-for="tde in tdeList" :key="tde.id" :value="tde.id" :label="tde.deName"></el-option>

          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="checkProjectUpdateVisible = false, checkProject = {}">取 消</el-button>
        <el-button type="primary" @click="updateTokenCheckProject">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      checkProjectAddVisible: false,
      checkProjectUpdateVisible:false,
      checkProjectParm: {},
      checkProject: {
      },
      tableData: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      tdeList: [],
    }
  },
  methods: {
    nextPage(val) {
      //用户点击下一页触发
      this.pageNum = val;
      this.queryCheckProject();
    },
    prevPage(val) {
      //用户点击上一页触发
      this.pageNum = val;
      this.queryCheckProject();
    },
    changeSize(val) {
      //改变每页显示的条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryCheckProject();
    },
    changeCurrent(val) {
      this.pageNum = val;
      this.queryCheckProject();
    },
    //搜索按钮
    queryCondition() {
      this.pageNum = 1;
      this.queryCheckProject();
    },
    //查询设备
    queryCheckProject() {
      let pageParm = {};
      pageParm.pageNum = this.pageNum;
      pageParm.pageSize = this.pageSize;
      pageParm.param = this.checkProjectParm;

      this.$axios.post('api/checkProject/queryCheckProject', pageParm)
        .then(res => {
          if (res.data.code === 200) {
            let parm = res.data.data;
            this.tableData = parm.list;
            this.total = parm.total;
          }
        })
    },
    //清空搜索条件
    remove() {
      this.checkProjectParm = {}
    },
    //新增检查项目界面
    add() {
      this.checkProjectAddVisible = true;
    },
    //添加检查项目
    addTokenCheckProject() {
      this.$axios.post('api/checkProject/addCheckProject', this.checkProject)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("添加成功");
            this.checkProject = {};
            this.checkProjectAddVisible = false;
            this.queryCheckProject();

          } else {
            this.$message.error("必选项为空")
          }
        })
    },
    //打开修改界面并传参
    upadtePage(id){
      this.checkProjectUpdateVisible = true;
      this.$axios.get('api/checkProject/queryCheckProjectById/'+id)
      .then(res=>{
        if(res.data.code === 200){
          this.checkProject = res.data.data;
        }
      })
    },

    //查询所有部门
    queryTde() {
      this.$axios.get('api/ward/queryTde')
        .then(res => {
          if (res.data.code === 200) {
            this.tdeList = res.data.data;
          }
        })
    },
    //获取部门方法名
    getDepartmentName(id) {
      return this.tdeList[id - 1].deName || "未知部门"
    },
    //修改病房
    updateTokenCheckProject() {
      this.$axios.post('api/checkProject/updateCheckProject', this.checkProject)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("修改成功");
            this.checkProject = {};
            this.checkProjectUpdateVisible = false;
            this.queryCheckProject();
          }else {
            this.$message.error("必选项为空")
          }
        })
    },
    //删除设备
    deleteCheckProject(id){
      this.$axios.get('api/checkProject/deleteCheckProject/'+id)
      .then(res=>{
        if (res.data.code === 200){
          this.$message.success("删除成功");
          this.queryCheckProject();
        } else {
            this.$message.error("删除失败")
          }
      })
    }
  },
  created() {
    this.queryCheckProject();
    this.queryTde();
  }
}
</script>
<style scoped>



body {
  font-family: 'Roboto', sans-serif; /* 或者你可以选择其他的字体 */
  color: #333;
}

/* 确保表格头部和单元格内容都居中显示 */
.el-table th, .el-table td {
  text-align: center !important;
}

/* 确保表格内的按钮或自定义模板内容也居中 */
.el-table .cell {
  justify-content: center !important;
  display: flex;
  align-items: center;
}
.el-button {
  border: none;
  box-shadow: 0 2px #888888;
}

/* 卡片样式和阴影效果 */
.el-card {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 调整输入框、按钮和选择框的圆角和边框颜色 */
.el-input, .el-button, .el-select-dropdown .el-scrollbar__view .el-select-dropdown__item, .el-select {
  border-radius: 4px;
}

/* 调整按钮的样式 */
.el-button {
  border-radius: 4px;
  font-weight: 500;
}

.el-button:focus, .el-button:hover {
  opacity: 0.9;
  box-shadow: none;
}

/* 按钮悬停效果 */
.el-button--primary:hover {
  background-color: #5e72e4;
  border-color: #5e72e4;
}

.el-button--warning:hover {
  background-color: #fbc658;
  border-color: #fbc658;
}

.el-button--danger:hover {
  background-color: #f5365c;
  border-color: #f5365c;
}

/* 调整表格中图像的边距和边框 */
.el-table .cell img {
  border-radius: 4px;
  margin-right: 10px;
}

/* 分页器样式 */
.el-pagination {
  background-color: #fff;
  padding: 10px;
  box-shadow: 0px 2px 6px #eaedf3;
  border-radius: 8px;
}

/* 对话框的样式 */
.el-dialog__header {
  background-color: #f0f2f5;
  color: #333;
}

/* 图标样式 */
.el-icon {
  vertical-align: middle;
  margin-right: 4px;
}

/* 提示框样式 */
.el-message-box {
  border-radius: 8px;
}

/* 上传组件样式 */
.avatar-uploader .el-upload {
  border-radius: 4px; /* 更圆润的按钮 */
}

/* 更改选择区域样式 */
.el-form--inline .el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

</style>